<template>
  <div class="application">
    <div class="theme">
      <div class="wrapper">
        <h1 class="title">应用软件系统安全测试</h1>
        <h2 class="desc">
          应用软件系统安全测试是确保软件在发布和运行过程中不受外部攻击和内部滥用的关键环节‌。<br />它主要包括以下几个方面：<br />
          ‌1. 动态渗透测试‌：<br />
          使用自动化工具或人工方法模拟黑客输入，对应用系统进行攻击性测试。<br />
          旨在发现运行时刻存在的安全漏洞，真实有效但覆盖率较低‌。<br />
          ‌2. 安全功能测试‌：
          采用黑盒测试方法，验证涉及安全的软件功能，如用户管理、权限管理等是否有效‌。<br />
          ‌3. 漏洞扫描‌：
          利用专业安全扫描工具快速定位软件中的已知漏洞，并提供修复建议。‌<br />
        </h2>
        <el-button
          class="banner-button"
          size="large"
          type="primary"
          round
          @click="openForm"
        >
          立即体验
        </el-button>
      </div>
    </div>
    <div class="section" style="background-image: none">
      <div class="wrapper">
        <h2 id="yycj" class="section-title">应用场景</h2>
        <div class="section-row" style="display: flex; flex-flow: row wrap">
          <div class="content-wrapper">
            <div class="item">
              <h3 class="sub-title">企业采购软件</h3>
              <p class="sub-desc">
                当企业采购新的应用软件系统（如企业资源规划软件 ERP）时，为确保软件安全可靠，会聘请第三方测试机构进行安全测试。这样可以客观评估软件是否存在安全漏洞，如数据泄露风险、非法访问隐患等，帮助企业做出合理的采购决策。
              </p>
            </div>
          </div>
          <div class="content-wrapper">
            <div class="item">
              <h3 class="sub-title">软件外包开发后验收</h3>
              <p class="sub-desc">
                企业将软件系统开发外包后，在验收阶段，第三方安全测试可以提供独立于开发团队的评估。比如检查软件是否符合企业预先设定的安全标准和行业规范，验证外包开发的软件在安全方面是否达到预期，避免因开发团队主观因素导致的安全问题被忽视。
              </p>
            </div>
          </div>
          <div class="content-wrapper">
            <div class="item">
              <h3 class="sub-title">行业监管要求</h3>
              <p class="sub-desc">
                对于一些受严格监管的行业（如金融、医疗、电信等），法规要求软件系统必须经过第三方安全测试。例如，金融软件要保证资金交易安全，第三方测试机构可以验证其是否满足反洗钱、防止金融诈骗等安全要求，确保软件系统符合行业监管标准。
              </p>
            </div>
          </div>
          <div class="content-wrapper">
            <div class="item">
              <h3 class="sub-title">软件上线前的安全验证</h3>
              <p class="sub-desc">
                在软件准备上线发布前，通过第三方测试来增强用户信心。例如，一款面向大众的社交软件，在上线前进行第三方安全测试，可以向用户证明软件在隐私保护、数据安全等方面是经过严格验证的，减少用户对安全风险的担忧。
              </p>
            </div>
          </div>
          <div class="content-wrapper">
            <div class="item">
              <h3 class="sub-title">软件更新和升级验证</h3>
              <p class="sub-desc">
                软件更新或升级后，企业可能会委托第三方进行安全测试。比如软件增加了新功能或修复了漏洞，第三方测试可以确认更新后的软件没有引入新的安全问题，并且原有安全机制依然有效，确保软件持续安全稳定运行。
              </p>
            </div>
          </div>
          <div class="content-wrapper">
            <div class="item">
              <h3 class="sub-title">多系统集成安全评估</h3>
              <p class="sub-desc">
                当企业进行多个软件系统集成（如将办公自动化系统与客户关系管理系统集成）时，第三方安全测试可以评估集成后的系统安全性。检查系统之间的数据交互安全、访问控制是否合理，防止因系统集成产生新的安全风险。
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="section"
      style="background-image: none; background-color: #f7f7f7"
    >
      <div class="wrapper">
        <h2 id="bzhff" class="section-title">标准和方法</h2>
        <div class="section-content">
          <p class="sub-desc">
            GB/T 28452-2012《信息安全技术 应用软件系统通用安全技术要求》<br />
          </p>
        </div>
      </div>
    </div>
    <div class="section" style="background-image: none">
      <div class="wrapper">
        <h2 id="bzjfw" class="section-title">标准交付物</h2>
        <div class="section-content">
          <div style="display: flex; justify-content: center">
            <img src="@/assets/img/应用安全封皮.png" alt="" />
            <img src="@/assets/img/应用安全目录.png" alt="" style="margin-left: 5%" />
          </div>
        </div>
      </div>
    </div>
    <div class="anchor">
      <el-anchor :offset="70">
        <el-anchor-link
          title="yycj"
          class="ant-anchor-ink"
          @click="goAnchor('#yycj')"
        >
          应用场景
        </el-anchor-link>
        <el-anchor-link
          title="bzhff"
          class="ant-anchor-ink"
          @click="goAnchor('#bzhff')"
        >
          标准和方法
        </el-anchor-link>
        <el-anchor-link
          title="bzjfw"
          class="ant-anchor-ink"
          @click="goAnchor('#bzjfw')"
        >
          标准交付物
        </el-anchor-link>
      </el-anchor>
    </div>
  </div>
  <!-- 创建订单 -->
  <CreateForm ref="formRef" />
</template>

<script setup>
import { ref, computed, defineEmits } from "vue";
import { useUserStore } from "@/store/modules/user";
import CreateForm from "../CreateForm.vue";
import { ElMessage } from "element-plus";
const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo);
const goAnchor = (selector) => {
  document.querySelector(selector).scrollIntoView({
    behavior: "smooth",
  });
};
/** 创建订单 */
const formRef = ref();
const openForm = () => {
  if (userInfo.value) {
    formRef.value.opendialog(5);
  } else {
    ElMessage({ message: "请先进行用户登录！", type: "warning" });
    userStore.setisShowLogin(true);
  }
};
</script>

<style lang="scss" scope>
.application {
  margin-top: 60px;

  .theme {
    height: 626px;
    width: 100%;
    background: #f7f7f7;
    background-image: url("@/assets/img/bac.jpg");
    background-size: 100% 100%;

    .banner-button {
      width: 12%;
    }

    .wrapper {
      margin: 0 auto;
      max-width: 1232px;
      padding: 167px 16px 0;
      position: relative;
      width: 100%;

      .title {
        color: #333;
        display: inline-block;
        font-size: 42px;
        font-weight: 700;
        margin-bottom: 12px;
        position: relative;
      }

      .desc {
        color: #333;
        font-size: 18px;
        font-weight: 400;
        line-height: 36px;
        margin-bottom: 40px;
        max-width: 820px;
      }
    }
  }

  .section {
    width: 100%;
    background: #fff;
    padding-bottom: 100px;
    background-image: url("@/assets/img/1d0799d2.png");
    background-size: 100% 100%;

    .wrapper {
      height: 100%;
      margin: 0 auto;
      max-width: 1232px;
      padding: 80px 16px 0;

      .section-title {
        margin-bottom: 50px;
        padding: 0 10px;
        color: #000;
        font-size: 32px;
        font-weight: 500;
        margin-bottom: 60px;
        text-align: center;
      }

      .section-content {
        zoom: 1;
        box-sizing: border-box;
        display: block;
        height: auto;
        margin-left: 0;
        margin-right: 0;
        position: relative;
        background-color: #fff;
        box-shadow: 0 20px 60px 0 rgba(0, 0, 0, 0.1);
        padding: 30px;

        .sub-title {
          color: #000;
          font-size: 20px;
          font-weight: 500;
          margin: 30px 0 10px;
        }

        .sub-desc {
          color: #666;
          font-size: 14px;
          line-height: 24px;
          margin-bottom: 30px;
          white-space: pre-line;
        }
      }

      .section-row {
        display: flex;
        flex-flow: row wrap;
        margin: -30px -45px;

        .content-wrapper {
          box-sizing: border-box;
          display: block;
          width: 50%;
          padding: 30px 45px;
          box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);

          .item {
            padding: 0 10px;

            .sub-title {
              color: #000;
              font-size: 20px;
              font-weight: 500;
              margin-bottom: 11px;
              position: relative;
            }

            .sub-title:before {
              background: #0074ff;
              content: "";
              height: 20px;
              left: -10px;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              width: 2px;
            }

            .sub-desc {
              color: #666;
              font-size: 16px;
              line-height: 28px;
              margin: 0;
              white-space: pre-line;
            }
          }
        }
      }
    }

    .list-wrapper {
      display: flex;
      justify-content: center;
      margin: 0 -16px;

      .list-item {
        border: 1px solid #e7e7e7;
        border-radius: 4px;
        cursor: pointer;
        display: flex;
        margin: 0 16px 16px;
        min-height: 30px;
        padding: 15px;

        .content {
          flex: 1;

          .title {
            align-items: center;
            display: flex;
            justify-content: space-between;
          }

          .title:before {
            background: #0074ff;
            content: "";
            height: 15px;
            left: -10px;
            position: relative;
            top: 10px;
            transform: translateY(-50%);
            width: 5px;
          }
        }
      }

      .list-item:hover {
        box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
      }
    }
  }
}

.anchor {
  position: fixed;
  width: 6%;
  top: 25%;
  left: 5%;
  // transform: translateX(-860px);
  padding: 5px;
  border-radius: 4px;
  background-color: rgb(255, 255, 255);
  box-sizing: border-box;
  box-shadow: 0 5px 16px 0 rgba(0, 0, 0, 0.1);
}

// @media screen and (min-width: 2560px) and (min-height: 1600px) {
//     .anchor {
//     /* 在宽度2560px及以上、高度1600px及以上时，可以根据需要调整样式 */
//     left: 50%;
//   }
// }
</style>
